<{extends file="manage/layout.tpl"}>
<{block name='css'}>
<link rel="stylesheet" type="text/css" href="/js/ztree/zTreeStyle/zTreeStyle.css">
<style type="text/css">
	.m-form-item{ margin: 10px 0; text-align: center; }
	.m-form-item label{ 
		font-weight: normal; 
		display: inline-block; 
		width: 80px;
		text-align: right;
	}
	.m-form-item input{ 
		display: inline-block;
		border: 1px solid #dcdcdc;
		transition: border .5s ease-in-out;
		-webkit-transition: border .5s ease-in-out;
		-moz-transition: border .5s ease-in-out;
		width: 360px;
		border-radius: 3px;
		line-height: 22px;
		padding: 6px 12px;
	}
	.m-menuChosse-select{ margin: 0 auto; margin-bottom: 10px; width: 440px;}
	.m-menuChosse-select label{ display: inline-block; width: 80px; text-align: right; }
	.m-menuChosse-select select{ display: inline-block; width: 120px; }
	.m-sMenu-content{ display: none; }
	.panel-body{ min-height: 400px; overflow-y: auto;}
	.panel-body::-webkit-scrollbar {
		width:9px; 
		height:9px; 
		background-color: #F5F5F5; 
	}/*滚动条整体部分*/
    .panel-body::-webkit-scrollbar-track{
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    	background-color: #F5F5F5;  
    	border-radius: 8px;
    }/*外层轨道*/
    .panel-body::-webkit-scrollbar-thumb{
    	background:#d9edf7; 
    	border-radius:8px; 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    }/*滚动条里可拖动的部分*/
	.panel-body::-webkit-scrollbar-thumb:hover{
		background:#d9edf7; 
    	border-radius:8px; 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
	}
	.ztree li span.button.ico_docu{
		margin-right: 2px;
	    background: url(/js/ztree/zTreeStyle/img/diy/2.png) no-repeat !important;
	    vertical-align: top;
	}
	.ztree li span.button.ico_open,.ztree li span.button.ico_close{
		margin-right: 2px;
	    background: url(/js/ztree/zTreeStyle/img/diy/1_open.png) no-repeat !important;
	    vertical-align: top;
	}
</style>
<{/block}>
<{block name=title}>菜单设置<{/block}>

<{block name=content}>
<section class="v6-m-mainBox">
	<div class="v6-m-mainContent">
		<div class="row">
			<div class="col-md-12">
			</div>
			<div class="col-md-8">
				<div class="panel panel-info">
					<div class="panel-heading">
						菜单管理
					</div>
					<div class="panel-body">
						<div class="m-menuChosse-select">
							<label>类型选择：</label>
							<select class="form-control">
								<option value="1">一级菜单</option>
								<option value="2">二级菜单</option>
							</select>
							<!-- <span class="m-menuChosse-alert">点击右侧菜单可添加主菜单</span> -->
						</div>
						<div class="m-fMenu-content">
							<div class="m-form-item">
								<label>菜单名称：</label>
								<input type="text" class="m-fMenu-name" placeholder="请输入菜单名称">
							</div>
							<div class="m-form-item">
								<label>跳转地址：</label>
								<input type="text" class="m-fMenu-address" placeholder="请输入菜单地址">
							</div>
							<div class="m-form-item">
								<label>图标样式：</label>
								<input type="text" class="m-fMenu-icon" placeholder="请输入图标样式">
							</div>
							<div class="m-form-item">
								<span class="btn btn-md btn-primary m-fMenu-btn">确认添加</span>
							</div>
						</div>

						<div class="m-sMenu-content">
							<div class="m-form-item">
								<label>父类菜单：</label>
								<input type="text" name="" class="m-sMenu-parentName" disabled placeholder="点击右侧菜单可添加主菜单">
							</div>
							<div class="m-form-item">
								<label>菜单名称：</label>
								<input type="text" name="" class="m-sMenu-name" placeholder="请输入菜单名称">
							</div>
							<div class="m-form-item">
								<label>跳转地址：</label>
								<input type="text" name="" class="m-sMenu-address" placeholder="请输入跳转地址">
							</div>
							<div class="m-form-item">
								<span class="btn btn-md btn-primary m-sMenu-btn">确认添加</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-info">
					<div class="panel-heading">
						菜单展示
					</div>
					<div class="panel-body">
						<ul class="ztree" id="zTree"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript" src="/js/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
	var settings = {
		async: {
			enable: true,
			url: '/manage/menu/get_menu',
			type: 'post',
			dataFilter: ajaxDataFilter,
			autoParam:['id']
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		check:{
			checkboxType:{ 'Y': 'ps', 'N': 'ps'}
		},
		callback:{
			onClick: zTreeClick
		}
	}
	var zTreeObj = $.fn.zTree.init($('#zTree'), settings);
	var nodeObj = $.fn.zTree.getZTreeObj('zTree');

	function ajaxDataFilter(treeId, parentNode, responseData) {
	   	responseData = responseData.data;
	   	return responseData;
	}

	function zTreeClick(event, treeId, treeNode){
		if(treeNode.level == 0){
			$('.m-sMenu-parentName').val(treeNode.name);
			$('.m-sMenu-btn').data('id', treeNode.id);
		}
	}

	$('.m-sMenu-btn').click(function(){
		var id = $(this).data('id');
		var name = $('.m-sMenu-name').val();
		var url = $('.m-sMenu-address').val();

		if($('.m-sMenu-parentName').val() == ''){
			layer.msg("请选择一级菜单栏!");
			return;
		}

		if(name == ''){
			layer.msg("菜单名称不能为空！");
			$('.m-sMenu-name').focus();
			return;
		}
		url = url ? url : 'javascript:void(0)';
		ajaxObj('/manage/menu/addedit_system_menu', 'post', {name: name, parent_id: id, skip_address: url,type: 2}, function(data){
			if(data.code == 1000){
				layer.msg("添加成功");
				nodeObj.reAsyncChildNodes(null, 'refresh');
				$('.m-sMenu-parentName').val('');
				$('.m-sMenu-name').val('');
				$('.m-sMenu-address').val('');
			}
		}, errorFn)
	})

	$('.m-menuChosse-select select').change(function(){
		if($(this).val() == 1){
			$('.m-fMenu-content').show();
			$('.m-sMenu-content').hide();
			$('.m-menuChosse-alert').css('display','none');
		}else{
			$('.m-fMenu-content').hide();
			$('.m-sMenu-content').show();
			$('.m-menuChosse-alert').css('display','inline-block');
		}
	})


	$('.m-fMenu-btn').click(function(){
		var cont = $('.m-fMenu-name').val();
		var icon = $('.m-fMenu-icon').val();
		var address = $('.m-fMenu-address').val();
		
		if(cont == ''){
			layer.msg('菜单名称不能为空！');
			return;
		}

		ajaxObj('/manage/menu/addedit_system_menu', 'post', {name: cont, type: 1, icon_path: icon,skip_address:address}, function(obj){
			if(obj.code == 1000){
				layer.msg('添加成功');
				nodeObj.reAsyncChildNodes(null, 'refresh');
				$('.m-fMenu-name').val('');
		 		$('.m-fMenu-icon').val('')
			}
		}, errorFn)
	})
</script>
<{/block}>